<template>
  <c-loading :loading="false">
    <view>
      <c-search class="my-search" placeholder="输入关键词搜索" v-model="keyword" @search="onSearch" @clear="onClear"></c-search>
      <view class="search-fix" v-if="!showList">
        <view class="search-title">热门搜索</view>
        <view class="key-group">
          <view class="key " v-for="item in hotKeys" :key="item.id" :class="{hot:item.isSuggest}" @tap="toSearch(item.keyword)"> <c-icon v-if="item.isSuggest" icon="thumb-up" />{{ item.keyword }}</view>
        </view>
        <view class="search-title">
          历史搜索
          <view class="clear" @tap="clearH" v-if="historyKeys.length">清空</view>
        </view>
        <view class="key-group">
          <view class="key" v-for="k in historyKeys" :key="k" @tap="toSearch(k)">{{ k }}</view>
        </view>
      </view>
      <template v-else>
        <view class="goods-wrap">
          <goods-item v-for="item in list" :key="item.id" v-bind="item" @cart="onCart"></goods-item>
        </view>
        <c-pager v-bind="pager"></c-pager>
      </template>
    </view>
    <template #popup>
      <sku-popup v-model="showSku" v-bind="info ?? {}" btn-text="加入购物车" @confirm="onAddCart"></sku-popup>
    </template>
  </c-loading>
</template>
<script setup>
import { CButton,CIcon, CLoading, CSearch, CPager } from '@/components';
import { useLoading, usePager } from '@/hooks';
import { ref } from 'vue';
import { View } from '@tarojs/components';
import goodsItem from './components/goods-item.vue';
import api from '@/api';
import skuPopup from '@/pages/goods/components/sku-popup.vue';
import toast from '@/utils/toast';
import { cache } from '@/utils';

const showSku = ref(false);
const info = ref(null);
const keyword = ref('');
const showList = ref(false);
const hotKeys = ref([]);

const onCart = item => {
  toast.loading.lock(async () => {
    info.value = await api.goods.goodsGetDetail({ id: item.id });
    showSku.value = true;
  });
};
const historyKeys = ref(cache.get('historyKeys') ?? []);
const clearH = () => {
  historyKeys.value = [];
  cache.set('historyKeys', historyKeys.value);
};
const onAddCart = async ({ sku, qty }) => {
  await api.goods
    .cartAdd({
      id: sku.id,
      value: qty
    })
    .success('已加入您的购物车', true)
    .error();
};
const { pager, list, reload } = usePager({
  immediate: false,
  handler: (skip, take) =>
    api.goods.goodsGoodsUserList({
      skip,
      take,
      KeywordField: 'goodsName',
      keyword: keyword.value
    })
});
const onClear = e => {
  showList.value = false;
};
const onSearch = async e => {
  if (!e) return (showList.value = false);
  showList.value = true;
  await reload();
  historyKeys.value = historyKeys.value.filter(a => a != e);
  historyKeys.value.unshift(e);
  cache.set('historyKeys', historyKeys.value);
};
const toSearch = async e => {
  keyword.value = e;
  showList.value = true;
  await reload();
};

const loadHotkeys = async () => {
  hotKeys.value = await api.goods.hotKeys();
};
loadHotkeys();
</script>
<style lang="scss">
.my-search {
  z-index: 3;
  position: relative;
}
.search-fix {
  position: fixed;
  width: 100%;
  height: calc(100vh - 100px);
  z-index: 3;
  background-color: var(--color-caption);
  top: 100px;
  left: 0px;
  padding: 5px 20px;
  .search-title {
    font-weight: bold;
    margin-bottom: 25px;
    margin-top: 30px;
    position: relative;
    .clear {
      font-weight: normal;
      font-size: 22px;
      position: absolute;
      right: 0;
      top: 0;
      padding: 10px;
      line-height: 1;
      color: var(--color-primary);
    }
  }
  .key-group {
    display: flex;
    flex-wrap: wrap;
    margin-right: -20px;
    .key {
      height: 60px;
      font-size: 26px;
      min-width: 120px;
      display: flex;
      border-radius: 30px;
      align-items: center;
      display: flex;
      justify-content: center;
      margin-right: 20px;
      margin-bottom: 15px;
      background-color: var(--color-background);
      color: var(--color-primary);
      padding: 0 20px;
      &.hot {
        color: var(--color-danger);
      }
    }
  }
}
.goods-wrap {
  padding: 20px 20px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
</style>
